<template>
  <div>
    <CloudDropdown
      @visibleChange="visibleChange"
      placement="bottomLeft"
      :visible="visible"
    >
      <div class="spacename cursor-pointer hover-blue">
        <div
          :title="$store.state.user.userInfo.spaceName"
          class="spacename-text"
        >
          {{ $store.state.user.userInfo.spaceName }}
        </div>
        <app-icon
          iconName="vcloud-arrow-down"
          style="margin-left: 4px; margin-top: 1px;color:#007AFF"
        />
      </div>
      <div slot="overlay" class="dropdown-menu">
        <template>
          <div @click="visible = true">
            <CloudSearch
              class="space-query-input"
              placeholder="请输入空间名称"
              width="256"
              @input="debounceInput"
              v-model.trim="query"
            >
            </CloudSearch>
          </div>
          <div
            v-if="$checkAuth('space_new_space')"
            class="space-add"
            title="新增设计空间"
            @click="addSpace"
          >
            <app-icon :iconName="'vcloud-btn-add'"></app-icon>
            新增设计空间
          </div>
          <div  class="space-content" @scroll="scrollFuc($event)">
            <div disabled v-show="loading" style="text-align: center">加载中...</div>
            <div
              class="space-content-item"
              :class="
                it.id == $store.state.user.userInfo.spaceId ? 'is-disabled' : ''
              "
              v-for="it in options"
              :key="it.id"
              :command="it.id"
              :title="it.spaceName"
              @click="ok(it.id)"
            >
              <div class="content">
                <span class="title"> {{ it.spaceName }}</span>
              </div>
            </div>
            <div
              disabled
              v-if="loading!=null&&!loading&&options.length === 0"
              style="text-align: center"
            >
              无匹配数据
            </div>
          </div>
        </template>
      </div>
    </CloudDropdown>
    <NeworEditDialog
      :visibleDialog="showNeworEditDialog"
      @closeDialog="closeDialog"
      @refresh="okDialog"
      :openType="openType"
      :currentitem="currentitem"
    ></NeworEditDialog>
  </div>
</template>

<script>
import { debounce } from "cloud-common/tool/tool";
import NeworEditDialog from "cloud-common/business/NeworEditDialog";
import {
  CloudModal,
  CloudRadioGroup,
  CloudCheckList,
  CloudDropdown,
  CloudSearch,
  
} from "cloud-components";
export default {
  data() {
    return {
      loading:null,
      visible: false,
      scrollLoad: false,
      pageNum: 1,
      query: "",
      options: [],
      showAddModal: false,
      showEditModal: false,
      showDelModal: false,
      okLoading: false,
      selectSpace: null,
      ambient: "云设计",
      typeList: [
        {
          value: 0,
          title: "项目",
        },
        {
          value: 1,
          title: "单位自用",
        },
      ],
      typeValue: 0,
      spaceUserTypeList: [
        {
          value: 0,
          title: "单位客户",
        },
        {
          value: 1,
          title: "集团客户",
        },
      ],
      spaceUserType: 0,
      listTipShow: false,
      industryTagsSelf: [],
      domainTagsSelf: [],
      industryTags: [],
      domainTags: [],
      collapses: [],
      checkedIndustry: {},
      checkedDomain: {},
      openType:'',
      showNeworEditDialog:false,
      currentitem:{}
    };
  },
  mounted() {
  },
  computed: {},
  components: {
    cloudModal: CloudModal,
    CloudRadioGroup: CloudRadioGroup,
    CloudSearch: CloudSearch,
    CloudCheckList,
    CloudDropdown: CloudDropdown,
    NeworEditDialog
  },
  methods: {
    closeDialog(){
      this.openType = '';
      this.showNeworEditDialog = false;
    },
    okDialog(){
      this.showNeworEditDialog = false;
      this.open();
    },
    visibleChange(visible) {
      this.visible = visible;
      if (visible){
        this.open();
      }else{
        this.query = '';
        this.options = [];
        this.loading = null;
      }
    },
    scrollFuc(e) {
      if (e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
        this.open(true);
      }
    },
    open(add) {
      if (!add) {
        this.pageNum = 1;
        this.loading = true;
      } else {
        if (this.scrollLoad) {
          return;
        }
        this.pageNum++;
        this.scrollLoad = true;
      }
      const { spaceName, spaceId } = this.$store.state.user.userInfo;
      this.api
        .selectByCondition({
          data: {
            orderByLatestOperateTime: 1,
            spaceName :this.query
          },
          page: this.pageNum,
          size: 10,
        })
        .then((res) => {
          if (add) {
            this.options = this.options.concat(res.data.data);
          } else {
            this.options = res.data.data;
          }
          if (!add) {
            this.loading = false;
          } else {
            this.scrollLoad = false;
          }
        })
        .catch(() => {
          if (!add) {
            this.loading = false;
          } else {
            this.scrollLoad = false;
          }
        });
    },

    debounceInput: debounce(function () {
      this.options = [];
      this.open();
    }, 300),
    addSpace() {
      this.showNeworEditDialog = true;
    },
    ok(spaceId) {
      this.visible = false;
      this.$cloudLoading.show(
        "正在切换中，请稍候...",
        "background: rgba(0, 0, 0, 0.7)"
      );
      this.api
        .switchSpace(
          { params: { spaceId } },
          { method: "get", customRequest: true }
        )
        .then((res) => {
          this.$store.commit("user/SET_USERINFO", {});
          this.$cloudMessage.success(`空间切换成功！`);
          this.$cloudLoading.hide();
          this.$router.push({ path: "/blank" });
        })
        .catch((err) => {
          this.$cloudLoading.hide();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.spacename {
  margin-right: 22px;
  display: flex;
  align-items: center;
  .spacename-text {
    text-align: right;
    min-width: 40px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:#007AFF
  }
}
.space-tip {
  padding: 20px 0 40px;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  text-align: center;
  .svg-icon {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    color: rgba(255, 200, 0, 1);
  }
  .red {
    font-weight: 500;
    color: rgba(255, 65, 65, 1);
  }
}
.space-form {
  padding: 0 60px 0 6px;
  .ant-form-item {
    margin-bottom: 8px;
    .tip {
      font-size: 12px;
      color: #ff9900;
      margin-left: -8px;
    }
    input {
      padding: 1px 11px;
      width: 525px;
      font-size: 14px;
    }
  }

  .ant-form-item-with-help {
    margin-bottom: 5px;
  }
  .space-form-list-frame {
    display: flex;
    margin-top: 8px;
  }
  .space-form-list-content {
    flex: 1;
  }
  .space-form-list-title {
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
    line-height: 20px;
  }
  .space-label-list {
    padding: 5px 10px 0 10px;
    max-height: 264px;
    overflow: auto;
    border: 1px solid #d9d9d9;
    border-top: 0;
  }
  .upload-list-tip {
    color: #f5222d;
  }
}
.dropdown-menu {
  width: 270px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  margin: 5px 0;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-height: 380px;
  max-width: 270px;
  overflow: auto;

  .space-add {
    padding: 8px 10px;
    line-height: 20px;
    cursor: pointer;
    .svg-icon {
      width: 16px;
      height: 16px;
    }
    color: rgba(47, 124, 246, 1);
  }
  .space-content {
    flex: auto;
    overflow: auto;
    .space-content-item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      list-style: none;
      line-height: 36px;
      padding: 0 20px;
      margin: 0;
      font-size: 14px;
      color: #606266;
      cursor: pointer;
      outline: 0;
      .content {
        display: flex;
        .title {
          flex: 1;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .operation {
          display: none;
          width: 40px;
          margin-left: 10px;
          .svg-icon {
            margin-right: 8px;
            cursor: pointer;
            width: 16px;
            height: 16px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .space-content-item.is-disabled {
      opacity: 0.6;
      cursor: default;
      color: #bbb;
      pointer-events: none;
    }
    .space-content-item:focus,
    .space-content-item:not(.is-disabled):hover {
      background-color: #ecf5ff;
      color: #66b1ff;
    }
  }
  .space-content-item:focus,
  .space-content-item:hover {
    .content .operation {
      display: block;
    }
  }
}

.space-query-input {
  padding: 0 5px 5px 5px;
  /deep/ {
    .ant-input-search.ant-input-affix-wrapper .ant-input {
      padding-left: 15px;
      padding-right: 30px;
    }
    .el-input__icon {
      line-height: 30px;
    }
    .el-input__suffix {
      right: 10px;
    }
  }
}
</style>
<style lang="scss">
.ant-form-explain,
.ant-form-extra {
  font-size: 12px;
}
</style>
